import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import { PLAN_STATUS } from '../../utils/constants';
import { useTheme } from '../../hooks/useTheme';

/**
 * 子计划项组件（用于周计划和月计划下的任务）
 */
const SubPlanItem = ({ subPlan, onToggle, onEdit, onDelete }) => {
  const { theme } = useTheme();
  const isCompleted = subPlan.status === PLAN_STATUS.COMPLETED;

  const handleToggle = (e) => {
    e.stopPropagation();
    if (onToggle) {
      onToggle();
    }
  };

  return (
    <View style={[
      styles.container,
      {
        backgroundColor: theme.colors.surface,
        borderLeftColor: theme.colors.primary,
      },
      isCompleted && styles.completedContainer
    ]}>
      <View style={styles.row}>
        {/* 复选框 */}
        <TouchableOpacity 
          style={[
            styles.checkbox,
            { borderColor: theme.colors.border },
            isCompleted && [styles.checkboxChecked, { backgroundColor: theme.colors.success, borderColor: theme.colors.success }]
          ]}
          onPress={handleToggle}
          activeOpacity={0.7}
        >
          {isCompleted && <Text style={styles.checkmark}>✓</Text>}
        </TouchableOpacity>
        
        {/* 计划内容 */}
        <View style={styles.textContainer}>
          <Text style={[
            styles.title,
            { color: theme.colors.text },
            isCompleted && [styles.completedTitle, { color: theme.colors.textSecondary }]
          ]}>
            {subPlan.title}
          </Text>
          {subPlan.description && (
            <Text style={[
              styles.description,
              { color: theme.colors.textSecondary },
              isCompleted && styles.completedDescription
            ]}>
              {subPlan.description}
            </Text>
          )}
        </View>

        {/* 操作按钮 */}
        <View style={styles.actions}>
          {onEdit && (
            <TouchableOpacity 
              style={[styles.actionButton, { backgroundColor: theme.colors.card }]}
              onPress={() => onEdit()}
              activeOpacity={0.7}
            >
              <Text style={[styles.actionText, { color: theme.colors.primary }]}>编辑</Text>
            </TouchableOpacity>
          )}
          {onDelete && (
            <TouchableOpacity 
              style={[styles.actionButton, styles.deleteButton, { backgroundColor: theme.colors.error + '20' }]}
              onPress={() => onDelete()}
              activeOpacity={0.7}
            >
              <Text style={[styles.actionText, styles.deleteText, { color: theme.colors.error }]}>删除</Text>
            </TouchableOpacity>
          )}
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    borderRadius: 8,
    padding: 12,
    marginLeft: 32,
    marginBottom: 8,
    borderLeftWidth: 3,
  },
  completedContainer: {
    opacity: 0.6,
  },
  row: {
    flexDirection: 'row',
    alignItems: 'flex-start',
  },
  checkbox: {
    width: 20,
    height: 20,
    borderRadius: 10,
    borderWidth: 2,
    marginRight: 10,
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 2,
  },
  checkboxChecked: {},
  checkmark: {
    color: '#FFFFFF',
    fontSize: 12,
    fontWeight: 'bold',
  },
  textContainer: {
    flex: 1,
  },
  title: {
    fontSize: 14,
    fontWeight: '500',
    marginBottom: 2,
  },
  completedTitle: {
    textDecorationLine: 'line-through',
  },
  description: {
    fontSize: 12,
  },
  completedDescription: {},
  actions: {
    flexDirection: 'row',
    marginLeft: 8,
    gap: 6,
  },
  actionButton: {
    paddingHorizontal: 8,
    paddingVertical: 4,
    borderRadius: 4,
  },
  deleteButton: {},
  actionText: {
    fontSize: 11,
    fontWeight: '500',
  },
  deleteText: {},
});

export default SubPlanItem;

